<template>
	<view class="comments">
		<view class="nav-header-box">
			<view class="header-left" @click="goback">
				<view class="header-left-icon"></view>
			</view>
			<view class="header-title">
				<view class="header-p">评论</view>
			</view>
			<view class="header-right">
				<view class="header-right-icon"></view>
			</view>
		</view>

		<view class="ul-comments">
			<block v-for="(item,index) in oneCommentsList" :key="index">
				<view class="li-comments">
					<view class="comments-img-box">
						<image :src="item.user_avators" mode=""></image>
					</view>
					<view class="comments-desc-box">
						<view class="user-name">{{item.user_nick_name}}</view>
						<view class="user-comments">{{item.content}}</view>
						<view class="bottom-func">
							<view class="comments-like">
								<view class="like-icon"></view>
								<view class="like-num">200</view>
							</view>
							<view class="comments-reply" @click="goTwoComments(item.id)">
								<view class="reply-icon"></view>
								<view class="reply-text">回复</view>
							</view>
						</view>
						<!-- <view class="Sub-comment">
							<view class="Sub-comments-img-box">
								<image src="../../static/logo.png" mode=""></image>
							</view>
							<view class="Sub-comments-desc-box">
								<view class="user-name">嬉皮笑脸的瓜</view>
								<view class="user-comments">你笑什对接客户么笑，给我哭</view>
								<view class="bottom-func">
									<view class="comments-like">
										<view class="like-icon"></view>
										<view class="like-num">200</view>
									</view>
									<view class="comments-reply">
										<view class="reply-icon"></view>
										<view class="reply-text">回复</view>
									</view>
								</view>
							</view>
						</view> -->
						<view class="see-more" @click="goTwoComments(item.id)">查看回复</view>
					</view>
				</view>
			</block>
			<view class="not-comments">
				没有更多评论了
			</view>
		</view>

		<view class="comments-fooder">
			<view class="fooder-left">
				<input type="text" class="inp-comments" name="" id="" v-model="oneComments" placeholder="请输入您的评论">
			</view>
			<view class="fooder-right" @click="getValue">
				<view class="send-icon"></view>
			</view>
		</view>



		<u-popup :show="pop" mode="bottom" @close="close" @open="open" :closeable="true" :zoom="false"
			:customStyle="{width:'100%',height:'550px',overflow:'scroll'}">

			<view class="ul-comments">
				<!-- <block v-for="(item,index) in oneCommentsList" :key="index"> -->
				<view class="li-comments">
					<view class="comments-img-box">
						<image :src="twoCommentsList.user_avators" mode=""></image>
					</view>
					<view class="comments-desc-box">
						<view class="user-name">{{twoCommentsList.user_nick_name}}</view>
						<view class="user-comments">{{twoCommentsList.content}}</view>
						<view class="bottom-func">
							<view class="comments-like">
								<view class="like-icon"></view>
								<view class="like-num">200</view>
							</view>
							<view class="comments-reply">
								<view class="reply-icon"></view>
								<view class="reply-text">回复</view>
							</view>
						</view>
						<view class="Sub-comment" v-for="(item,index) in sonCommentsList" :key="'s' + index">
							<view class="Sub-comments-img-box">
								<image :src="item.user_avators" mode=""></image>
							</view>
							<view class="Sub-comments-desc-box">
								<view class="user-name">{{item.user_nick_name}}</view>
								<view class="user-comments">{{item.content}}</view>
								<view class="bottom-func">
									<view class="comments-like">
										<view class="like-icon"></view>
										<view class="like-num">200</view>
									</view>
									<view class="comments-reply">
										<view class="reply-icon"></view>
										<view class="reply-text">回复</view>
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="see-more">查看回复(2)</view> -->
					</view>
				</view>
				<!-- </block> -->
				<view class="not-comments">
					没有更多评论了
				</view>
			</view>
			<view class="comments-fooder">
				<view class="fooder-left">
					<input type="text" class="inp-comments" name="" id="" v-model="twoComments" placeholder="请输入您的评论">
				</view>
				<view class="fooder-right" @click="sendTwoComm(twoCommentsList.id)">
					<view class="send-icon"></view>
				</view>
			</view>

		</u-popup>

	</view>


</template>

<script>
	import {
		io
	} from "socket.io-client";
	import {
		newsArea,
		oneCommon,
		commonChild,
		getCommon,
		childList
	} from "@/api/request"
	export default {
		data() {
			return {
				// socket:"",
				// roomId:"",
				oneComments: "",
				twoComments: "",
				sonCommentsList:[],
				oneCommentsList: [],
				twoCommentsList: {},
				news_id: "",
				pop: false

			}
		},
		methods: {
			//返回上一层
			goback(){
				uni.navigateBack({
						delta:1,//返回层数，2则上上页
					})
			},
			//获取子评论
			getTwoComments(id){
				childList({news_id:this.news_id,son_id:id}).then(content=>{
					// console.log(content,"1111");
					this.sonCommentsList = content.data
				})
			},
			//发表子评论
			sendTwoComm(id) {
				// { content, news_id, publish_time, son_id, user_id }
				if (this.twoComments != "") {
					let publish_time = new Date()
					let user_id = localStorage.getItem("user_id")
					let user_avators = localStorage.getItem("user_avators")
					let user_nick_name = localStorage.getItem("user_nick_name")
					console.log({
						content: this.twoComments,
						news_id: this.news_id,
						publish_time,
						son_id: id,
						user_id,
						user_avators,
						user_nick_name
					});
					commonChild({
						content: this.twoComments,
						news_id: this.news_id,
						publish_time,
						son_id: id,
						user_id,
						user_avators,
						user_nick_name
					}).then(content => {
						this.twoComments=""
						// console.log(content);
					}).then(content=>{
						this.getTwoComments(id)
					})
				} else {
					uni.showToast({
						title: "发送不能未空",
						icon: "error"
					})
				}
			},
			//点击回复
			goTwoComments(e) {
				// console.log("eeee",e);
				this.pop = !this.pop;
				getCommon({
					id: e,
					news_id: this.news_id
				}).then(content => {
					console.log(content);
					let {
						code,
						data
					} = content
					this.twoCommentsList = data[0]
					// console.log(this.twoCommentsList);
				}).then(content=>{
					this.getTwoComments(e);
				})
			},
			open() {
				console.log('open');
			},
			close() {
				this.pop = false
				// console.log('close');
			},
			//获取第一级评论
			getArea(id) {
				this.news_id = id;
				newsArea({
					news_id: id
				}).then(content => {
					// console.log(content);
					let {
						code,
						data
					} = content;
					this.oneCommentsList = data.filter(item => {
						return item.son_id == null
					})
					data.forEach(item=>{
						
					})
					// console.log("121212",this.oneCommentsList);
				})

			},
			//发表一级评论
			getValue() {
				// console.log(this.news_id);
				// { content, news_id, publish_time, user_id }
				if (this.oneComments != "") {
					console.log(this.oneComments);
					let publish_time = new Date()
					let user_id = localStorage.getItem("user_id");
					let user_avators = localStorage.getItem("user_avators")
					let user_nick_name = localStorage.getItem("user_nick_name")
					oneCommon({
						content: this.oneComments,
						news_id: this.news_id,
						publish_time,
						user_id,
						user_avators,
						user_nick_name
					}).then(content => {
						console.log(content);
						this.oneComments = ""
					}).then(content => {
						this.getArea(this.news_id)
					})
				} else {
					uni.showToast({
						title: "发送不能未空",
						icon: "error"
					})
				}

			}
		},
		onLoad(e) {
			this.getArea(e.id)
			// this.getTwoComments(e.id)
			// const socket = io("http://localhost:3000");
			// this.socket = socket;
			// socket.on("connect",(data)=>{
			// 	console.log("链接成功");
			// 	console.log(socket.id);
			// 	this.roomId = socket.id
			// })
			// socket.on("sendRoomId",(data)=>{
			// 	console.log(data);
			// })
		}
	}
</script>

<style lang="scss" scoped>
	.comments {
		position: relative;
		width: 100%;
		padding: $uni-box-padding;
	}

	.nav-header-box {
		z-index: 1;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		// border: 1px solid #000;
		padding: 30rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// height: 48rpx;

		.header-title {
			font-size: 32rpx;
			font-weight: bold;

		}

		.header-left,
		.header-right {
			width: 48rpx;
			height: 48rpx;
			background-repeat: no-repeat;
			background-size: 100%;
		}

		.header-left {
			background-image: url("@/static/image/back.png");
		}

		.header-right {
			background-color: #fff;
		}
	}

	.ul-comments {
		width: 100%;
		padding: 100rpx 0 200rpx;

		.not-comments {
			// padding-top: 20rpx;
			text-align: center;
		}

		.li-comments {
			padding: 10rpx 10rpx 20rpx;
			display: flex;

			.comments-img-box {
				border-radius: 50%;
				width: 80rpx;
				height: 80rpx;

				image {
					border-radius: 50%;
					width: 100%;
					height: 100%;
				}
			}

			.comments-desc-box {
				width: calc(100% - 80rpx);
				padding: 5rpx 0 10rpx 15rpx;
				border-bottom: 1px solid #999;

				.user-name {
					font-size: 32rpx;
					color: #000;
				}

				.user-comments {
					padding-top: 10rpx;
					font-size: 28rpx;
					color: #4E4B66;
				}
			}

			.bottom-func {
				padding-top: 10rpx;
				width: 100%;
				display: flex;
				align-items: center;

				.comments-reply,
				.comments-like {
					display: flex;
					align-items: center;

					.reply-icon,
					.like-icon {
						width: 28rpx;
						height: 28rpx;
						background-repeat: no-repeat;
						background-size: 100%;
					}

					.like-icon {
						background-image: url("@/static/image/com-notlike.png");

						&.active {
							background-image: url("@/static/image/com-like.png");
						}
					}

					.reply-icon {
						background-image: url("@/static/image/reply.png");
					}

					.reply-text,
					.like-num {
						padding-left: 10rpx;
						font-size: 24rpx;
						color: #4E4B66;
					}
				}

				.comments-reply {
					padding-left: 40rpx;
				}

			}

			.see-more {
				padding: 30rpx 0 10rpx 0;
				font-size: 28rpx;
				color: #4E4B66;
			}

			.Sub-comment {
				padding-top: 30rpx;
				width: 100%;
				display: flex;

				.Sub-comments-img-box {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;

					image {
						border-radius: 50%;
						width: 100%;
						height: 100%;
					}
				}

				.Sub-comments-desc-box {
					width: calc(100% - 80rpx);
					padding: 5rpx 0 0 15rpx;
				}
			}
		}
	}

	.comments-fooder {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		box-shadow: 0px -5px 10px -8px #999;
		padding: $uni-box-padding;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.inp-comments {
			border: 1px solid #4E4B66;
			// flex-grow: 1;
			width: 580rpx;
			height: 96rpx;
			border-radius: 10rpx;
			padding-left: 20rpx;
		}

		.fooder-right {
			width: 100rpx;
			height: 100rpx;
			background-color: #1877F2;
			border-radius: 10rpx;
			display: flex;
			align-items: center;

			.send-icon {
				margin: 0 auto;
				width: 48rpx;
				height: 48rpx;
				background-image: url("@/static/image/send.png");
				background-repeat: no-repeat;
				background-size: 100%;
			}
		}

	}
</style>